<script setup>
import {ref, computed} from 'vue'
import {useCartStore} from "@/stores/shopcarStore";
import useUserInfoStore from "@/stores/userInfo";
import {useRouter} from "vue-router";
import {putOrderService} from "@/apis/customer";

const cartStore = useCartStore()
const userInfoStore = useUserInfoStore()

const selectedGoods = computed(() => cartStore.cartList.filter(item => item.selected))
const selectedGoodsNumCount = computed(() => selectedGoods.value.reduce((a, c) => a + parseInt(c.count), 0))
const selectedGoodsPriceCount = computed(() => selectedGoods.value.reduce((a, c) => a + parseInt(c.count) * parseFloat(c.price), 0))

const form = ref({
    name: userInfoStore.info.nickname,
    phone: userInfoStore.info.phone,
    address: userInfoStore.info.address
})

const validatePhone = (rule, value, callback) => {
    if (!value) {
        return new Error('请输入电话')
    } else {
        const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
        const isPhone = reg.test(value)
        value = Number(value) //转换为数字
        if (typeof value === 'number' && !isNaN(value)) {
            //判断是否为数字
            value = value.toString() //转换成字符串
            if (value.length < 0 || value.length > 12 || !isPhone) {
                //判断是否为11位手机号
                callback(new Error('请输入11位手机号'))
            } else {
                callback()
            }
        } else {
            callback(new Error('请输入电话'))
        }
    }
}

const rules = {
    name: [
        {required: true, message: '姓名不能为空', trigger: 'blur'}
    ],
    phone: [
        {required: true, validator: validatePhone, trigger: 'blur'}
    ],
    address: [
        {required: true, message: '地址不能为空', trigger: 'blur'}
    ],

}

const formRef = ref(null)
const router = useRouter()

const doOrder = () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            await putOrderService(form.value, selectedGoods.value)
            await cartStore.updateCart()
            await router.replace({path: '/ordersuccess'})
        }
    })
}
</script>

<template>
    <div class="o-container wrapper clearfix">
        <div class="order-filter-bar">
            <span>确认订单</span>
        </div>
        <div class="o-message">
            <el-form ref="formRef" :model="form" :rules="rules" status-icon>
                <div class="o-person">
                    <el-form-item prop="name" label="姓名">
                        <el-input placeholder="请输入姓名" v-model="form.name" style="width: 300px"/>
                    </el-form-item>
                    <el-form-item prop="phone" label="电话">
                        <el-input placeholder="请输入电话" v-model.number="form.phone" style="width: 300px"/>
                    </el-form-item>
                </div>
                <div class="o-address">
                    <el-form-item prop="address" label="地址">
                        <el-input placeholder="请输入地址" v-model="form.address" style="width: 300px"/>
                    </el-form-item>
                </div>
                <div class="o-list">
                    <p>已选商品</p>
                    <ul>
                        <li v-for="item in selectedGoods" :key="item">
                            <div class="p-goods">
                                <div class="p-img">
                                    <img :src="item.img" :alt="item.name" />
                                </div>
                                <div class="p-msg">
                                    <span>{{item.name}}</span>
                                </div>
                            </div>
                            <div class="p-price"><span>单价￥{{parseInt(item.price).toFixed(2)}}</span></div>
                            <div class="p-cate"><span>数量x{{item.count}}</span></div>
                            <div class="p-sum"><span>总价￥{{(item.price * item.count).toFixed(2)}}</span></div>
                        </li>
                    </ul>
                    <div class="o-submit">
                        <p>共{{selectedGoodsNumCount}}件商品，总价<span>￥{{selectedGoodsPriceCount.toFixed(2)}}</span></p>
                        <el-button @click="doOrder">提交订单</el-button>
                    </div>
                </div>
            </el-form>
        </div>
    </div>
</template>

<style scoped>
.o-container .order-filter-bar {
    border-bottom: 2px solid #b1191a;
    margin-top: 20px;
}

.o-container .order-filter-bar span {
    font-size: 20px;
    color: #b1191a;
    font-weight: bold;
}

.o-container .o-message label{
    font-size: 20px;
}

.o-container .o-message .o-person {
    margin-top: 30px;
    margin-bottom: 20px;
}

.o-container .o-message .o-person span{
    font-size: 18px;
    margin-left: 20px;
}

.o-container .o-address {
    margin-bottom: 20px;
}

.o-container .o-message .o-address input{
    margin-right: 5px;
}

.o-container .o-message .o-address .region{
    margin-left: 20px;
}

.o-container .o-message .o-address span {
    font-size: 18px;
}

.o-container .o-message input {
    height: 30px;
    width: 200px;
}

.o-container .o-addr-details span {
    font-size: 18px;
    margin-left: 20px;
}

.o-container .o-list {
    position: relative;
    float: left;
    margin-top: 20px;
}

.o-container .o-list p {
    font-size: 18px;
}

.o-container .o-list .p-img {
    float: left;
    margin-top: 5px;
    padding: 2px;
    border: 1px solid #a3a3a3;
}
.o-container .o-list li{
    height: 60px;
    width: 520px;
    border: 1px solid #e8e8e8;
    border-top: 2px solid #a3a3a3;
}

.o-container .o-list img {
    height: 40px;
    width: 40px;
    object-fit: contain;
}

.o-container .o-list .p-msg {
    float: left;
    margin-left: 10px;
    height: 60px;
    width: 190px;
    overflow: hidden;
}
.o-container .o-list span{
    line-height: 60px;
}

.o-container .o-list .p-price {
    float: left;
    margin-left: 10px;
    height: 60px;
    width: 80px;
    overflow: hidden;
}

.o-container .o-list .p-cate {
    float: left;
    margin-left: 10px;
    height: 60px;
    width: 60px;
    overflow: hidden;
}

.o-container .o-list .p-sum {
    float: left;
    margin-left: 10px;
    height: 60px;
    width: 100px;
    overflow: hidden;
}

.o-container .o-list .o-submit {
    margin-top: 30px;
    width: 500px;
}

.o-container .o-list .o-submit p {
    float: left;
    margin-right: 20px;
    font-size: 16px;
    color: black
}
.o-container .o-list .o-submit p span{
    color: #b1191a
}

.o-container .o-list .o-submit button {
    float: right;
    height: 40px;
    width: 150px;
    color: #fff;
    background-color: #b1191a;
    border: 0;
    font-size: 18px;
    border-radius: 20px;
}

</style>